<template>
  <div>
    <el-card style="margin: 0px 10px;">
      <el-form :inline="true">
        <el-form-item label="一级分类">
          <el-select style="width: 260px;" :disabled="scene === 1 ? true : false" placeholder="请选择" size="large"
            v-model="categoryStore.category1Id" @change="handler1">
            <el-option v-for="(item, _index) in categoryStore.category1List" :key="item.id" :label="item.name"
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类">
          <el-select style="width: 260px;" :disabled="scene === 1 ? true : false" placeholder="请选择" size="large"
            v-model="categoryStore.category2Id" @change="handler2">
            <el-option v-for="(item, _index) in categoryStore.category2List" :key="item.id" :label="item.name"
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="三级级分类">
          <el-select style="width: 260px;" :disabled="scene === 1 ? true : false" placeholder="请选择" size="large"
            v-model="categoryStore.category3Id">
            <el-option v-for="(item, _index) in categoryStore.category3List" :key="item.id" :label="item.name"
              :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
// 引入属性分类的小仓库
import { useCategoryStore } from '@/store/modules/category'



defineProps({
  scene: {
    type: Number,
    default: 0
  }
})

let categoryStore = useCategoryStore();
const getC1 = async () => {
  await categoryStore.getCategoryList();
}

const handler1 = async () => {
  categoryStore.category2Id = null;
  categoryStore.category3Id = null;
  categoryStore.category3List = [];
  let id: number | null = categoryStore.category1Id || null;
  if (!id) {
    console.log('id为空');
    return;
  }
  await categoryStore.getCategory2List(id);

}

const handler2 = async () => {
  categoryStore.category3Id = null;
  let id: number | null = categoryStore.category2Id || null;
  if (!id) {
    console.log('id为空');
    return;
  }
  await categoryStore.getCategory3List(id);
}
onMounted(() => {
  getC1()
})

</script>

<style scoped lang="scss">
.header-form-inline .el-input {
  --el-input-width: 220px;
}
</style>